<div class="login-container">
  <div class="login-wrapper">
    <div class="login-card">
      <div class="login-header">
        <div class="logo">
          <i class="fas fa-ticket-alt"></i>
        </div>
        <h2 class="login-title">{{ 'SYSTEM_NAME' | translate }}</h2>
        <p class="login-subtitle">{{ 'LOGIN_SUBTITLE' | translate }}</p>
      </div>

      <div class="login-body">
        <form name="loginFormElement" ng-submit="$ctrl.login()" novalidate>
          <div class="form-group mb-3">
            <label for="username" class="form-label">{{ 'USERNAME' | translate }}</label>
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="fas fa-user"></i>
                </span>
              </div>
              <input type="text" 
                     id="username" 
                     name="username"
                     class="form-control" 
                     placeholder="{{ 'USERNAME_REQUIRED' | translate }}"
                     ng-model="$ctrl.loginForm.username" 
                     required
                     ng-class="{ 'is-invalid': loginFormElement.username.$invalid && loginFormElement.username.$touched }">
            </div>
            <div class="invalid-feedback" ng-show="loginFormElement.username.$invalid && loginFormElement.username.$touched">
              {{ 'USERNAME_REQUIRED' | translate }}
            </div>
          </div>

          <div class="form-group mb-3">
            <label for="password" class="form-label">{{ 'PASSWORD' | translate }}</label>
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="fas fa-lock"></i>
                </span>
              </div>
              <input type="password" 
                     id="password" 
                     name="password"
                     class="form-control" 
                     placeholder="{{ 'PASSWORD_REQUIRED' | translate }}"
                     ng-model="$ctrl.loginForm.password" 
                     required
                     ng-class="{ 'is-invalid': loginFormElement.password.$invalid && loginFormElement.password.$touched }">
            </div>
            <div class="invalid-feedback" ng-show="loginFormElement.password.$invalid && loginFormElement.password.$touched">
              {{ 'PASSWORD_REQUIRED' | translate }}
            </div>
          </div>

          <div class="form-check mb-3">
            <input type="checkbox" class="form-check-input" id="remember"
                   ng-model="$ctrl.loginForm.remember">
            <label class="form-check-label" for="remember">
              {{ 'REMEMBER_LOGIN' | translate }}
            </label>
          </div>

          <div class="alert alert-danger" ng-show="$ctrl.errorMessage">
            <i class="fas fa-exclamation-circle me-2"></i>{{ $ctrl.errorMessage }}
          </div>

          <button type="submit" 
                  class="btn btn-primary btn-block login-btn"
                  ng-disabled="$ctrl.isLoading">
            <span ng-show="$ctrl.isLoading">
              <i class="fas fa-spinner fa-spin me-2"></i>{{ 'LOADING' | translate }}
            </span>
            <span ng-hide="$ctrl.isLoading">
              <i class="fas fa-sign-in-alt me-2"></i>{{ 'LOGIN' | translate }}
            </span>
          </button>
        </form>

        <div class="login-actions">
          <button type="button" class="btn btn-link btn-sm" ng-click="$ctrl.resetForm()">
            {{ 'RESET' | translate }}
          </button>
        </div>
      </div>

      <div class="demo-accounts">
        <h6 class="demo-title">{{ 'DEMO_ACCOUNTS' | translate }}</h6>
        <div class="demo-account-list">
          <div class="demo-account" ng-repeat="account in $ctrl.demoAccounts">
            <div class="account-info">
              <strong>{{ account.username }}</strong>
              <span class="account-role">{{ account.role }}</span>
            </div>
            <button class="btn btn-outline-primary btn-sm" 
                    ng-click="$ctrl.fillDemoAccount(account)">
              {{ 'USE_ACCOUNT' | translate }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="login-footer">
      <p>&copy; 2024 {{ 'SYSTEM_NAME' | translate }}. {{ 'BUILT_WITH' | translate }} AngularJS & Webpack</p>
    </div>
  </div>
</div>